<script setup lang="ts">
import {
  withDefaults,
  onMounted,
  ref,
  markRaw,
  watch,
  onBeforeUnmount,
  provide,
  readonly
} from "vue";
import { loadYoga } from "@/utils/loadYoga";
import { createNode } from "@/utils/calculate.ts";
import { ROOT_NODE_KEY } from "@/constants/symbols";
import { Application } from "pixi.js";
import FLexNode from "./FLexNode.vue";
// 定义组件可以触发的事件
const emit = defineEmits(["beforeCreate"]);
const yoga = ref<any>(null);
const props = withDefaults(
  defineProps<{
    width?: number;
    height?: number;
  }>(),
  {
    width: 500,
    height: 500
  }
);
let rootNode;

// Provide the yoga ref directly - this must be in the setup scope
provide("yoga", yoga);

onMounted(async () => {
  // addPixi();
  loadYoga()
    .then((Yoga) => {
      // 使用markRaw和readonly组合，使对象既非响应式又只读
      yoga.value = markRaw(Yoga);
      readonly(yoga);
      emit("beforeCreate", yoga.value);

      rootNode = createNode(yoga.value, {
        id: ROOT_NODE_KEY,
        width: props.width,
        height: props.height
      });

      console.log("父组件yoga", yoga);
    })
    .catch((error) => {
      console.error("加载 Yoga 失败:", error);
    });
});

const addPixi = async ()=>{
    // Create a PixiJS application.
    const app = new Application();

  // Intialize the application.
  await app.init({ background: "#1099bb", resizeTo: window });

  // Then adding the application's canvas to the DOM body.
  document.body.appendChild(app.canvas);
}
</script>
<template>
  <div v-if="yoga">Yoga 实例已更新</div>
  <template v-if="yoga">
    <div>子组件</div>
    <FLexNode _isRoot>
      
      <FLexNode id="1"> 
        <FLexNode id="2"> </FLexNode>
      </FLexNode>
    </FLexNode>
  </template>
</template>
